<template>
<!-- 相册设置 -->
  <div class="container">

    <v-header :title="title"></v-header>

    <div class="content">
      <div class="content-wrapper">
        <div class="basic">
          <h1>基础设置</h1>
          <ul class="list">
            <li class="list-item" @click="basic">
              <div class="view-left">
                <span class="text">基本设置</span>
              </div>
              <div class="view-right">
                <i class="more"></i>
              </div>
            </li>
          </ul>
        </div>

        <div class="photos">
          <h1>照片管理</h1>
          <ul class="list">
            <li class="list-item" @click="interaction">
              <div class="view-left">
                <i class="icon interaction"></i>
                <span class="text">互动设置</span>
              </div>
              <div class="view-right">
                <i class="more"></i>
              </div>
            </li>
            <li class="list-item" @click="privacy">
              <div class="view-left">
                <i class="icon privacy"></i>
                <span class="text">隐私设置</span>
              </div>
              <div class="view-right">
                <i class="more"></i>
              </div>
            </li>
            <li class="list-item" @click="photographer">
              <div class="view-left">
                <i class="icon photographer"></i>
                <span class="text">管理摄影师</span>
              </div>
              <div class="view-right">
                <i class="more"></i>
              </div>
            </li>
            <li class="list-item" @click="retoucher">
              <div class="view-left">
                <i class="icon retoucher"></i>
                <span class="text">管理秀图师</span>
              </div>
              <div class="view-right">
                <i class="more"></i>
              </div>
            </li>

          </ul>        
        </div>
        
        <div class="personal">
          <h1>个性设置</h1>
          <ul class="list">
            <li class="list-item">
              <div class="view-left">
                <i class="icon watermark"></i>
                <span class="text">水印设置</span>
              </div>
              <div class="view-right">
                <i class="more"></i>
              </div>
            </li>
            <li class="list-item">
              <div class="view-left">
                <i class="icon details"></i>
                <span class="text">详情设置</span>
              </div>
              <div class="view-right">
                <i class="more"></i>
              </div>
            </li><li class="list-item" @click="routerPush('/album/startupPage')">
              <div class="view-left">
                <i class="icon cover"></i>
                <span class="text">相册启动页</span>
              </div>
              <div class="view-right">
                <i class="more"></i>
              </div>
            </li><li class="list-item" @click="routerPush('/album/publicity')">
              <div class="view-left">
                <i class="icon propaganda"></i>
                <span class="text">顶部宣传设置</span>
              </div>
              <div class="view-right">
                <i class="more"></i>
              </div>
            </li>

          </ul>        
        </div>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">

import VHeader from 'components/v-header'

export default {
  data() {
    return {
      title: '设置'
    }
  },
  components: {
    VHeader
  }, 
  methods: {
    basic: function () {
      this.$router.push({
        path: '/album/basic'
      })
    },
    interaction: function () {
      this.$router.push({
        path: '/album/interaction'
      })
    },
    privacy: function () {
      this.$router.push({
        path: '/album/privacy'
      })
    },
    photographer: function () {
      this.$router.push({
        path: '/album/photographer'
      })
    },
    retoucher: function () {
      this.$router.push({
        path: '/album/retoucher'
      })
    },
    watermark: function () {
      this.$router.push({
        path: '/album/watermark'
      })
    },
    details: function () {
      this.$router.push({
        path: '/album/details'
      })
    },
    cover: function () {
      this.$router.push({
        path: '/album/cover'
      })
    },
    propaganda: function () {
      this.$router.push({
        path: '/album/propaganda'
      })
    }
  }
}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

.container
  position fixed
  display flex
  flex-direction column
  width 100%
  height 100%
  background-color $color-bg-gray
  .content
    position relative
    flex 1
    overflow-y scroll
    .content-wrapper
      margin-bottom 15px
      .basic, .photos, .personal
        margin-top 15px
        text-align center
        background-color #fff
        h1
          position relative
          display inline
          width 100%
          height 50px
          line-height 50px
          text-align center
          font-size $font-size-small
          color #999999
          &:before
            position absolute
            content ''
            width 15px
            height 1px
            top 50%
            left -25px
            transform translateY(-50%)
            background-color #cccccc
          &:after
            position absolute
            content ''
            width 15px
            height 1px
            top 50%
            right -25px
            transform translateY(-50%)
            background-color #cccccc
        .list
          .list-item    
            display flex
            justify-content space-between
            align-items center
            height 50px
            padding 0 30px 0 15px
            border 1px solid $color-bg-gray
            &:last-child
              border-none()
            .view-left
              .icon
                display inline-block
                vertical-align middle
                width 13px
                height 15px
                background-size 13px 15px
                &.interaction
                  bg-image('../../common/images/icon_interaction')
                &.privacy
                  bg-image('../../common/images/icon_privacy')
                &.photographer
                  bg-image('../../common/images/icon_photographer')
                &.retoucher
                  bg-image('../../common/images/icon_retoucher')
                &.watermark
                  bg-image('../../common/images/icon_watermark')
                &.details
                  bg-image('../../common/images/icon_details')
                &.cover
                  bg-image('../../common/images/icon_cover')          
                &.propaganda
                  bg-image('../../common/images/icon_propaganda')
              .text
                font-size $font-size-small-s
                color #333333
                margin-left 10px
            .view-right    
              .more
                display inline-block
                width 7px
                height 14px
                background-size 7px 14px
                bg-image('../../common/images/more')

</style>
